<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="search/img/lcon.png">
    <title>DLH搜搜</title>

    <link rel="stylesheet" type="text/css" href="search/css/diy.css">
</head>
<body style="width: auto;height: 100%;text-align: center;" >
    <div style="height: 50px;">

    </div>
    <div style="height: 300px;">
        <img src="search/img/logo2.png" style="width: 300px;margin-top: 100px" alt=""/>
    </div>
    <div style="height: 100px; text-align: center">
        <div style="border-radius: 30px;height: 45px;width: 600px;margin: auto;border: 2px solid #bcbcb7;background-color: #f5f5f5">
            <form onsubmit="submitFn(this, event);">
                <input type="text" id="search-input" autofocus="autofocus" class="search-input"/>

                <div class="search-logo-div" id="search-logo">
                    <img src="search/img/baidu.png" id="baidu" alt="" class="search-logo first"/>
                    <div class="search-logo-div-son" >
                        <img src="search/img/google.png" id="google" alt="" class="search-logo"/>
                        <img src="search/img/bing1.png" id="bing" alt="" class="search-logo"/>
                    </div>
                </div>

            </form>
        </div>
    </div>
    <div style="height: 300px;">

    </div>
</body>
<script src="search/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    window.onload = function (ev) {
        console.log(getCookie('search'));
        var search = getCookie('search');

        var $src = $("#"+search).attr("src");
        var $id = $("#"+search).attr("id");

        $("#"+search).attr("src",$(".first").attr("src"));
        $(".first").attr("src",$src);

        $("#"+search).attr("id",$(".first").attr("id"));
        $(".first").attr("id",$id);
        $('.search-logo-div-son').removeClass("hover");

        console.log($src);
    };

    function yincang(){
        $('.search-logo-div-son').removeClass("hover");
        $('.search-logo-div').removeClass("card");
    }

    $(".search-logo").on('click',function(){
        var $src = $(this).attr("src");
        var $id = $(this).attr("id");
        $(this).attr("src",$(".first").attr("src"));
        $(".first").attr("src",$src);

        $(this).attr("id",$(".first").attr("id"));
        $(".first").attr("id",$id);
        $('.search-logo-div-son').removeClass("hover");
        $('.search-logo-div').removeClass("card");

        setCookie($id,1);
    });

    $(".search-logo-div > img").click(function(){
        $(".search-logo-div-son").addClass("hover");
        $('.search-logo-div').addClass("card");
    });

    function submitFn(obj, evt){

        evt.preventDefault();

        value = $(obj).find('.search-input').val().trim();
        var search = $(".search-logo").attr("id");

        console.log(search + " | " + value);

        if(search === "baidu"){
            window.location.href = "https://www.baidu.com/s?word="+value;
        }else if(search === "google"){
            window.location.href = "https://www.google.com/search?q="+value;
        }else if(search === "bing"){
            window.location.href = "https://lookao.com/search?q="+value;
        }

    }

    // 函数中的参数分别为 cookie 的名称、值以及过期天数
    function setCookie(value,expiredays){
        var exdate=new Date();
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie="search=" +escape(value)+
            ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    }


    // 函数中的参数为 要获取的cookie键的名称。
    function getCookie(userName){
        if (document.cookie.length>0){
            c_start=document.cookie.indexOf(userName+ "=");
            if (c_start!=-1){
                c_start=c_start + userName.length+1;
                c_end=document.cookie.indexOf(";",c_start);
                if (c_end==-1){
                    c_end=document.cookie.length;
                }
                return unescape(document.cookie.substring(c_start,c_end));
            }
        }
        return "";
    }

</script>
</html>